<template>
  <div class="login-box">
    <el-dialog
      v-model="$store.state.user.dialogVisible"
      :destroy-on-close="true"
      @close="closeDialog"
    >
      <template #header>
        <span class="dialog-header">用户登录</span>
      </template>
      <div class="contain">
        <div class="lef">
          <div class="lef-mo1" v-show="loginWay">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
              <el-form-item prop="phone">
                <el-input
                  v-model="ruleForm.phone"
                  placeholder="请你输入手机号码"
                  prefix-icon="User"
                  class="mo1-style"
                />
              </el-form-item>
              <el-form-item prop="code">
                <el-input
                  v-model="ruleForm.code"
                  placeholder="请你输入手机验证码"
                  prefix-icon="Lock"
                  class="mo1-style"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  class="mo1-style"
                  :disabled="testPhone || flag"
                  @click="getCode"
                >
                  <CountDone
                    v-if="flag"
                    :flag="flag"
                    @getFlag="getFlag"
                  ></CountDone>
                  <span v-else>获取验证码</span>
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  class="loginBtn mo1-style"
                  :disabled="!testPhone && !testCode ? false : true"
                  @click="goLogin"
                  >用户登录</el-button
                >
              </el-form-item>
            </el-form>
            <div class="weChar-login" @click="changeLoginWay">
              <div class="loginWay">微信扫码登录</div>
              <div class="loginImg">
                <svg
                  t="1688921974790"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="15061"
                  width="32"
                  height="32"
                >
                  <path
                    d="M1023.162182 641.303273c0-143.243636-143.243636-260.910545-306.944-260.910546-168.820364 0-306.944 117.666909-306.944 260.910546s133.003636 260.910545 306.944 260.910545c35.816727 0 71.633455-10.24 107.426909-20.456727l97.210182 56.273454-25.576728-92.090181c71.633455-56.273455 127.883636-127.906909 127.883637-204.637091z m-404.130909-46.056728c-20.456727 0-35.816727-15.36-35.816728-35.816727 0-15.336727 20.456727-35.816727 35.816728-35.816727 25.576727 0 46.056727 15.36 46.056727 35.816727-0.023273 15.36-20.48 35.816727-46.056727 35.816727z m194.397091 0c-15.336727 0-35.816727-15.36-35.816728-35.816727 0-15.336727 20.456727-35.816727 35.816728-35.816727 25.576727 0 46.056727 15.36 46.056727 35.816727 0 15.36-15.36 35.816727-46.056727 35.816727z m0 0"
                    fill="#04AE0F"
                    p-id="15062"
                  ></path>
                  <path
                    d="M358.097455 104.122182c-199.517091 0-358.120727 133.026909-358.120728 306.967273 0 97.210182 56.273455 179.060364 143.243637 240.453818L107.426909 758.970182l127.906909-61.393455c46.033455 10.24 81.850182 20.456727 127.906909 20.456728h35.816728c-5.12-25.576727-10.216727-51.153455-10.216728-76.730182 0-158.580364 133.003636-286.510545 306.944-286.510546h35.816728C690.641455 211.549091 537.157818 104.122182 358.097455 104.122182z m-112.54691 240.453818c-25.576727 0-56.273455-15.36-56.273454-46.056727 0-25.6 25.6-46.056727 56.273454-46.056728 25.576727 0 46.056727 15.36 46.056728 46.056728-5.12 30.696727-20.456727 46.056727-46.056728 46.056727z m250.693819 0c-25.576727 0-56.273455-15.36-56.273455-46.056727 0-25.6 25.576727-46.056727 56.273455-46.056728 25.576727 0 46.056727 15.36 46.056727 46.056728-0.023273 30.696727-20.48 46.056727-46.056727 46.056727z m0 0"
                    fill="#04AE0F"
                    p-id="15063"
                  ></path>
                </svg>
              </div>
            </div>
          </div>
          <div class="lef-mo2" v-show="!loginWay">
            <wxlogin
              :appid="appID"
              :scope="scope"
              :redirect_uri="redirectUrl"
            ></wxlogin>
            <div class="iphone-login" @click="changeLoginWay">
              <div>手机短信验证码登录</div>
              <div class="iphone-icon">
                <svg
                  t="1688923491762"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="16931"
                  width="16"
                  height="16"
                >
                  <path
                    d="M766.003899 974.097466H282.947368a47.906433 47.906433 0 0 1-47.906432-47.906433V83.836257a47.906433 47.906433 0 0 1 47.906432-47.906432h483.056531a47.906433 47.906433 0 0 1 47.906432 47.906432v842.354776a47.906433 47.906433 0 0 1-47.906432 47.906433z m-241.528265-57.88694a61.879142 61.879142 0 1 0-61.879143-61.879142 61.879142 61.879142 0 0 0 61.879143 61.879142z m202.604288-791.454191H321.871345v598.83041h405.208577V124.756335z"
                    fill="#E61D15"
                    p-id="16932"
                  ></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="rig">
          <div class="rig-display">
            <div class="weChat-box">
              <img src="@/assets/imgs/code_login_wechat.png" />
              <div>
                <svg
                  t="1688921974790"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="15061"
                  width="16"
                  height="16"
                >
                  <path
                    d="M1023.162182 641.303273c0-143.243636-143.243636-260.910545-306.944-260.910546-168.820364 0-306.944 117.666909-306.944 260.910546s133.003636 260.910545 306.944 260.910545c35.816727 0 71.633455-10.24 107.426909-20.456727l97.210182 56.273454-25.576728-92.090181c71.633455-56.273455 127.883636-127.906909 127.883637-204.637091z m-404.130909-46.056728c-20.456727 0-35.816727-15.36-35.816728-35.816727 0-15.336727 20.456727-35.816727 35.816728-35.816727 25.576727 0 46.056727 15.36 46.056727 35.816727-0.023273 15.36-20.48 35.816727-46.056727 35.816727z m194.397091 0c-15.336727 0-35.816727-15.36-35.816728-35.816727 0-15.336727 20.456727-35.816727 35.816728-35.816727 25.576727 0 46.056727 15.36 46.056727 35.816727 0 15.36-15.36 35.816727-46.056727 35.816727z m0 0"
                    fill="#515151"
                    p-id="15062"
                  ></path>
                  <path
                    d="M358.097455 104.122182c-199.517091 0-358.120727 133.026909-358.120728 306.967273 0 97.210182 56.273455 179.060364 143.243637 240.453818L107.426909 758.970182l127.906909-61.393455c46.033455 10.24 81.850182 20.456727 127.906909 20.456728h35.816728c-5.12-25.576727-10.216727-51.153455-10.216728-76.730182 0-158.580364 133.003636-286.510545 306.944-286.510546h35.816728C690.641455 211.549091 537.157818 104.122182 358.097455 104.122182z m-112.54691 240.453818c-25.576727 0-56.273455-15.36-56.273454-46.056727 0-25.6 25.6-46.056727 56.273454-46.056728 25.576727 0 46.056727 15.36 46.056728 46.056728-5.12 30.696727-20.456727 46.056727-46.056728 46.056727z m250.693819 0c-25.576727 0-56.273455-15.36-56.273455-46.056727 0-25.6 25.576727-46.056727 56.273455-46.056728 25.576727 0 46.056727 15.36 46.056727 46.056728-0.023273 30.696727-20.48 46.056727-46.056727 46.056727z m0 0"
                    fill="#515151"
                    p-id="15063"
                  ></path>
                </svg>
              </div>
              <div>微信扫一扫关注</div>
              <div>"快速预约挂号"</div>
            </div>
            <div class="app-box">
              <img src="@/assets/imgs/code_app.png" />
              <div>
                <svg
                  t="1688923491762"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="16931"
                  width="16"
                  height="16"
                >
                  <path
                    d="M766.003899 974.097466H282.947368a47.906433 47.906433 0 0 1-47.906432-47.906433V83.836257a47.906433 47.906433 0 0 1 47.906432-47.906432h483.056531a47.906433 47.906433 0 0 1 47.906432 47.906432v842.354776a47.906433 47.906433 0 0 1-47.906432 47.906433z m-241.528265-57.88694a61.879142 61.879142 0 1 0-61.879143-61.879142 61.879142 61.879142 0 0 0 61.879143 61.879142z m202.604288-791.454191H321.871345v598.83041h405.208577V124.756335z"
                    fill="#E61D15"
                    p-id="16932"
                  ></path>
                </svg>
              </div>
              <div>扫一扫下载</div>
              <div>"预约挂号"APP</div>
            </div>
          </div>
          <div class="rig-title">尚医通官方指定平台</div>
          <div class="rig-title">快速挂号 安全放心</div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="closeBtn">关闭窗口</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reqCode, reqUserLogin, reqWxLogin } from "@/api/HospitalPage/index";
import CountDone from "@/components/CountDone";
import { saveUserInfo } from "@/utils/userInfo";
import wxlogin from "vue-wxlogin";
export default {
  name: "LoginPopover",
  data() {
    return {
      loginWay: true,
      dialogVisible: false,
      flag: false,
      ruleForm: {
        phone: "",
        code: "",
      },
      rules: {
        phone: [
          {
            required: true,
            message: "请输入正确的手机号码格式",
            trigger: "change",
            min: 11,
          },
        ],
        code: [
          {
            required: true,
            message: "请输入六位数验证码",
            trigger: "blur",
            min: 6,
          },
        ],
      },
      appID: "",
      redirectUrl: "",
      scope: "",
    };
  },
  components: {
    CountDone,
    wxlogin,
  },
  methods: {
    async changeLoginWay() {
      this.loginWay = !this.loginWay;
      if (this.loginWay === false) {
        // 发送请求获取微信扫码二维码需要参数
        // 我们在向硅谷学校的服务器发请求，获取微信扫码登录页面参数
        // 还需要携带一个参数：告诉学校服务器，用户授权成功以后重定向项目的某一页面
        let redirect_URL = encodeURIComponent(
          window.location.origin + "wxlogin"
        );
        let result = await reqWxLogin(redirect_URL);
        this.appID = result.data.appid;
        this.redirectUrl = result.data.redirectUri;
        this.scope = result.data.scope;
      }
    },
    closeDialog() {
      Object.assign(this.ruleForm, { phone: "", code: "" });
    },
    closeBtn() {
      Object.assign(this.ruleForm, { phone: "", code: "" });
      this.$store.commit("user/GET_DIALOG", this.dialogVisible);
    },
    confirmPhone() {
      this.$refs.ruleFormRef.validate();
    },
    async getCode() {
      this.flag = true;
      let result = await reqCode(this.ruleForm.phone);
      if (result.code === 200) {
        this.ruleForm.code = result.data;
      }
    },
    getFlag(val) {
      this.flag = val;
    },
    async goLogin() {
      await this.$refs.ruleFormRef.validate();
      try {
        let result = await reqUserLogin(this.ruleForm);
        this.$store.commit("user/GET_DIALOG", this.dialogVisible);
        this.$store.commit("user/GET_USER_INFO", result.data);
        saveUserInfo(result.data.token, result.data.name);
        if (this.$route.query.redirect) {
          this.$router.push(this.$route.query.redirect);
        } else {
          this.$router.go(0);
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: "用户登录失败",
        });
      }
    },
  },
  computed: {
    testPhone() {
      const reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      return !reg.test(this.ruleForm.phone);
    },
    testCode() {
      const reg = /^\d{6}$/;
      return !reg.test(this.ruleForm.code);
    },
  },
};
</script>

<style lang="scss" scoped>
.login-box {
  ::v-deep .el-dialog__body {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .dialog-header {
    color: #303133;
    font-size: 18px;
  }
  .contain {
    display: flex;
    .lef {
      width: 50%;
      .lef-mo1 {
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 20px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        .loginBtn {
          width: 100%;
          margin-left: 0;
        }
        .loginWay {
          text-align: center;
          margin-top: 10px;
        }
        .loginImg {
          text-align: center;
          margin-top: 10px;
          margin-bottom: 20px;
        }
      }
      .lef-mo2 {
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 20px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        .iphone-icon {
          margin-top: 10px;
          margin-bottom: 20px;
        }
        .iphone-login {
          margin-top: 30px;
        }
        div {
          text-align: center;
        }
      }
    }
    .rig {
      width: 50%;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
      .rig-display {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 194px;
        .weChat-box {
          height: 100%;
          img {
            height: 130px;
          }
          div {
            margin-top: 5px;
            text-align: center;
          }
        }
        .app-box {
          height: 100%;
          img {
            height: 130px;
          }
          div {
            margin-top: 5px;
            text-align: center;
          }
        }
      }
      .rig-title {
        color: #606266;
        font-size: 20px;
        font-weight: 700;
        margin-top: 20px;
        text-align: center;
      }
    }
  }
}
</style>
